<template>
  <div>
    <h1>App</h1>
    <div>
      <!-- 
        在$router上还存在 back forward go 方法用来历史记录的编程式导航
       -->
      <button @click="$router.back()">后退1</button>
      <button @click="$router.forward()">前进1</button>
      <button @click="$router.go(2)">前进2</button>
    </div>
    <div>
      <button @click="toNews">新闻</button>
      <button @click="toMusic">音乐</button>
      <button @click="toPlay">娱乐</button>
    </div>
    <div>
      <!-- 
        Vue-Router提供了一个router-link组件,可以实现声明式路由导航
        声明式路由导航的to属性就是代表要导航的位置
        声明式路由导航底层使用的还是编程式路由导航,所以to接受的值其实就是传递给$router.push方法的值

        tag属性:主要是为了改变router-link组件解析的标签,但是已经被启用,我们可以使用插槽解决

        active-class:接受一个类名,当当前的路由被匹配的时候,则直接添加上这个类名

        replace:设置本次导航不留下历史记录
       -->
      <router-link to="/news" active-class="active" replace
        ><button>新闻</button></router-link
      >

      <router-link
        :to="{
          path: '/music',
        }"
        active-class="active"
        replace
      >
        <button>音乐</button>
      </router-link>

      <router-link
        :to="{
          name: 'Play',
        }"
        active-class="active"
        replace
      >
        <button>娱乐</button>
      </router-link>
    </div>

    <!-- 
      使用router-view组件对路由组件进行占位
     -->
    <!-- 
      我们可以把缓存组件 keep-alive 包裹住 router-view组件,即可实现路由组件的缓存
      activated和deactivated两个生命周期也适用于 缓存的路由组件

      -->
    <p :style="{ color: 'red' }">
      当前加载的路由组件名字是{{ $route.meta.title }} 图标是:{{
        $route.meta.icon
      }}
    </p>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "App",
  mounted() {
    console.log(this);
  },
  methods: {
    toNews() {
      //在$router对象上有一个push和replace方法,可以进行 编程式路由导航
      //push可以留下历史记录,而replace不会留下历史记录
      // console.log(this.$router);
      //$router的push方法的方式1:接受一个url地址字符串作为参数

      //处理编程式路由导航重复导航报错:1.使用catch捕获错误即可
      this.$router.push("/news");
    },
    async toMusic() {
      //$router的push方法的方式2:接收一个location对象作为参数,内部使用path属性书写地址
      //处理编程式路由导航重复导航报错:1.使用trycatch捕获(try不能捕获失败的promise,只能捕获await 等待一个失败的promise的语法错误)
      this.$router.push({
        path: "/music",
      });
    },
    toPlay() {
      //$router的push方法的方式3:接收一个location对象作为参数,内部使用name属性书写路由名称
      this.$router.push({
        name: "Play",
      });
    },
  },
};
</script>

<style scoped>
.active button {
  background: red;
}
</style>
